<template>
  <div>
    <div class="pb-6.875rem">
      <div
        class="pt-1.25rem pl-1.25rem pr-1.25rem pb-1.25rem bg-white mb-1.25rem"
        v-for="(item, i) in data"
      >
        <div
          class="pb-0.625rem border-b flex justify-between text-0.875rem items-center"
        >
          <div class="text-[#999999]">订单号：{{ item.pp_order_no }}</div>
          <div class="text-[#F9363C]">
            <span v-show="item.state == 1">待付款</span>
            <span v-show="item.state == 2">待收款</span>
            <span v-show="item.state == 3">待上架</span>
            <span v-show="item.state == 4">已出售</span>
          </div>
        </div>
        <div
          class="mt-0.625rem flex justify-between w-full pb-0.625rem border-b"
        >
          <div>
            <van-image
              width="5.5rem"
              height="4.875rem"
              fit="contain"
              :src="item.goods_image"
            />
          </div>
          <div class="flex flex-col text-0.875rem">
            <div class="mt-0.25rem">{{ item.goods_name }}</div>
            <div class="mt-0.25rem">{{ item.goods_no }}</div>
            <div class="mt-0.25rem flex items-center">
              <div class="text-[#2E95FF]">{{ item.sell_name }}</div>
              <div
                class="ml-0.625rem bg-[#F9363C] rounded-0.3125rem w-3rem h-1.25rem flex justify-center items-center text-white"
              >
                卖家
              </div>
            </div>
            <div class="mt-0.25rem text-[#7C7C7C]" @click="copy(item.sell_no)">
              卖家邀请码(点击复制)
            </div>
            <div class="mt-0.25rem text-[#7C7C7C]" @click="copy(item.sell_no)">
              {{ item.sell_no }}
            </div>
            <div class="mt-0.25rem flex items-center">
              <div class="text-[#2E95FF]">{{ item.buy_name }}</div>
              <div
                class="ml-0.625rem bg-[#0CB031] rounded-0.3125rem w-3rem h-1.25rem flex justify-center items-center text-white"
              >
                买家
              </div>
            </div>
            <div class="mt-0.25rem text-[#7C7C7C]" @click="copy(item.buy_no)">
              买家邀请码(点击复制)
            </div>
            <div class="mt-0.25rem text-[#7C7C7C]" @click="copy(item.buy_no)">
              {{ item.buy_no }}
            </div>
          </div>
          <div class="text-14px text-[#F9363C]">
            <div>
              <div>价格：</div>
              <div class="mt-0.3125rem">¥{{ item.price }}</div>
            </div>
            <div class="mt-1.25rem">
              <div>应付：</div>
              <div class="mt-0.3125rem">¥{{ item.price }}</div>
            </div>
          </div>
        </div>
        <div class="mt-0.625rem text-0.875rem">
          <div class="text-[#999999]">下单时间：{{ item.create_time }}</div>
          <div
            class="w-full flex justify-between items-center mt-0.4375rem"
            v-if="item.upper_time || item.pay_time || item.true_time"
          >
            <div class="text-[#999999]">
              更新时间：
              <span>{{
                item.upper_time
                  ? item.upper_time
                  : item.true_time
                  ? item.true_time
                  : item.pay_time
                  ? item.pay_time
                  : ""
              }}</span>
            </div>
            <div class="text-[#999999]">
              运费：¥ <span class="text-[#F9363C]">0</span>
            </div>
          </div>
          <div class="mt-0.4375rem flex justify-end items-center">
            <div class="text-[#999999]">
              实付：¥ <span class="text-[#F9363C]">{{ item.price }}</span>
            </div>
            <div class="text-[#999999]">
              实付：¥ <span class="text-[#F9363C]">{{ item.price }}</span>
            </div>
          </div>
          <div class="mt-1.25rem flex justify-end items-center text-0.75rem">
            <div
              v-if="item.state != 3 && item.state != 4"
              @click="otherInformation(item.id)"
              class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#2E95FF] rounded-0.3125rem text-white"
            >
              对方信息
            </div>
            <div
              @click="reselect(item.id)"
              v-if="item.state == 1"
              class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#F9363C] rounded-0.3125rem text-white ml-0.9375rem"
            >
              重选买家
            </div>
            <div
              @click="pay(item.id)"
              v-if="item.state == 1"
              class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#F9363C] rounded-0.3125rem text-white ml-0.9375rem"
            >
              确认付款
            </div>
            <div
              @click="collect(item.id)"
              v-if="item.state == 2"
              class="w-4.375rem h-1.5625rem flex justify-center items-center bg-[#F9363C] rounded-0.3125rem text-white ml-0.9375rem"
            >
              确认收款
            </div>
            <!-- <div
              @click="upGoods(item.id)"
              v-if="item.state == 3"
              class="w-70px h-1.5625rem flex justify-center items-center bg-[#F9363C] rounded-0.3125rem text-white ml-0.9375rem"
            >
              提货
            </div> -->
            <div
              @click="upSell(item.id)"
              v-if="item.state == 3"
              class="w-98px h-1.5625rem flex justify-center items-center bg-[#F9363C] rounded-0.3125rem text-white ml-0.9375rem"
            >
              申请上架挂售
            </div>
            <div
              @click="handlePrice(item.id)"
              v-if="item.state == 3"
              class="w-81px h-1.5625rem flex justify-center items-center border rounded-0.3125rem text-[#7C7C7C] ml-0.9375rem"
            >
              查看上架费
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { showToast } from "vant";
import { getsjPrice } from "@/util/api";
import h5Copy from "@/util/junyi-h5-copy";
const props = defineProps({
  data: { type: Array },
});
const price = ref("");
const emits = defineEmits([
  "otherInformation",
  "pay",
  "collect",
  "upGoods",
  "upSell",
  "reselect",
]);
const otherInformation = (id) => {
  emits("otherInformation", id);
};
//确认付款
const pay = (id) => {
  emits("pay", id);
};
//确认收款
const collect = (id) => {
  emits("collect", id);
};
//提货
const upGoods = (id) => {
  emits("upGoods", id);
};
//申请重新上架
const upSell = (id) => {
  emits("upSell", id);
};
//重选买家
const reselect = (id) => {
  emits("reselect", id);
};
const copy = (val) => {
  const res = h5Copy(val);
  if (res) {
    showToast("复制成功");
  } else {
    showToast("复制失败");
  }
};
//查看上架费
const handlePrice = async (id) => {
  const res = await getsjPrice({ id: id });

  showToast("上架费：" + res.msg);
};
</script>
